<template>
	<view>
		<dfHeader :type="type" :key="timer"></dfHeader>
		<section class="main index_st15">
			<div class="width-auto1">
				<span class="i1"></span>
				<span class="i2"></span>
				<div class="blog-post-section section width-auto">
					<div class="blog-post-container container w-container">
						<div class="white-content-block">

							<div class="product-left">
								<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-android">
									<div class="swiper-wrapper">
									</div>

									<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>

									<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
								</div>
							</div>



							<div class="product-right">
								<span>{{data.title}}</span>
								<div class="yuedu">
									<rich-text :nodes="htmlNodes" class="wxParse active-item-richtext" style="user-select: text;"></rich-text>
								</div>
							</div>
							<div class="product-Content">
								<span>产品介绍</span>
								<p><img alt="" :src="data.pic" style="width: 1092px; height: 934px;"></p>
							</div>
						</div>
					</div>
				</div>
				<span class="i3"></span>
				<span class="i5"></span>
			</div>

			<div class="wenz_more" @tap="$functions.goPage('/chanpin')"><span>查看更多</span></div>
		</section>
		<dfFooter></dfFooter>
	</view>
</template>

<script>
	// 处理html字符串
	import htmlParser from '@/common/html-parser'
	export default {
		components: {},
		data() {
			return {
				timer: '',
				type: 0,
				openFormStatus: false,
				loading: true,
				data: {},
				htmlNodes: '',
				hasImg: true,
				// 底部按钮的显示
				showBt: false,
				tag: [],
				dataList: {},
				config: this.$config
			}
		},
		onLoad(event) {
			uni.showLoading({});
			var id = this.$Route.query.id.replace(".html", '');
			// console.log(this.$Route.query)
			this.data.id = id;
			this.getDetail();
			this.getList();
		},
		methods: {
			goDetail: function(e) {
				var _this = this;
				// console.log(e);
				var phoneVerify = this.$functions.getCache('phoneVerify');
				phoneVerify.then(function(x) {
					console.log("phoneVerify:" + x)
					var type = e.typeId;
					if (x || type != 'baoguang')
						_this.$functions.goDetail(e, _this);
					else
						_this.openFormPhone();

				})
			},
			goTag(str) {
				this.$Router.push({
					name: 'tags',
					params: {
						search: str
					}
				})
			},
			// 获取数据列表
			getList() {
				let _this = this;
				var data = {
					pageSize: 8,
					minId: 0,
					typeId: "shouye"
				};
				this.$request.api_request('pl_list', data).then(function(data) {
					console.log(data);
					_this.dataList = data.result;
					// 取消刷新图标
					uni.stopPullDownRefresh();
				})
			},
			// 打开加盟框
			openForm() {
				// 轮流切换open值，触发模板里的watch函数
				this.openFormStatus = this.openFormStatus ? false : true;
				console.log('openForm');
			},
			getDetail() {
				let _this = this;
				this.$request.api_request('pl_list_detail', {
					id: this.data.id
				}).then(function(data) {
					// console.log(data)
					data = data.result;
					// 页面容错
					if (data.title == undefined) {
						_this.$functions.goPage("/404");
					}
					_this.type = '/' + data.typeId;
					if (_this.type == "zhaoshang")
						_this.showBt = true;

					// 触发header刷新，用来定位文章所属的菜单
					_this.timer = new Date().getTime();
					// console.log(data.pic=="")
					_this.hasImg = data.pic == "" ? false : true;
					data.pic = _this.$config.staticUrl + data.pic;
					_this.data = data;
					if (data.keywords != undefined)
						if (data.keywords.length > 0)
							_this.tag = data.keywords.split(',')
					_this.$functions.setTDK(data.title, data.subs, data.keywords);
					// 去掉图片，不然会影响文本显示
					var htmlString = data.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none !important;\"");
					var htmlString = data.content;
					_this.htmlNodes = htmlParser(htmlString);
					_this.loading = false;
					uni.hideLoading();
				})
			}
		}
	}
</script>
<style lang="scss">
	.index_st15 .yuedu img {
		max-width: 100%;
		text-indent: 0
	}

	.wenz_more {
		text-align: center;
		background: #fff;
		height: 5rem;
		line-height: 5rem;
	}


	.main {
		margin-top: 1rem;



		.width-auto1 {
			width: 90%;
			padding: 0 8px;
			position: relative;
			margin: 0 auto;
			background: #fff;
			border: 1px solid #b52121;
		}

		.width-auto1 .i1 {
			width: 35px;
			height: 35px;
			background: url(@/static/img/notice5.png) no-repeat;
			background-size: 35px 35px;
			display: inline-block;
			float: left;
		}

		.width-auto1 .i2 {
			width: 35px;
			height: 35px;
			background: url(@/static/img/notice6.png) no-repeat;
			background-size: 35px 35px;
			display: inline-block;
			float: right;
		}

		.width-auto1 .i3 {
			width: 35px;
			height: 35px;
			background: url(@/static/img/notice7.png) no-repeat;
			background-size: 35px 35px;
			display: inline-block;
			float: left;
			margin-top: -35px;
		}

		.width-auto1 .i5 {
			width: 35px;
			height: 35px;
			background: url(@/static/img/notice8.png) no-repeat;
			background-size: 35px 35px;
			display: inline-block;
			float: right;
			margin-top: -35px;
		}

		.product-left {
			width: 100%;
			float: left;
		}

		.product-right {
			width: 100%;
		}

		.product-right span {
			font-size: 23px;
			font-weight: 600;
			color: #5f5f5f;
			line-height: 80px;
			width: 100%;
		}


		.white-content-block {
			margin-bottom: 5px;
			position: relative;
			z-index: 3;
			display: block;
			overflow: hidden;
			width: 100%;
			margin-right: auto;
			margin-left: auto;
			margin-bottom: 80px;
		}

		.white-content-block .product-right p {
			font-size: 16px;
			color: #5f5f5f;
			line-height: 50px;
			width: 100%;
			border-bottom: 1px dashed #ccc;
			margin-bottom: 0px;
		}

		.white-content-block img {
			width: 100% !important;
			height: 100% !important;
		}

		.product-Content {
			line-height: 50px;
			text-align: center;
			font-size: 0;
			padding-top: 30px;
			display: block;
		}

		.product-Content span {
			font-size: 20px;
			color: #b52121;
			display: inline-block;
			line-height: 50px;
			height: 50px;
			width: 265px;
			background: url(@/static/img/tetle7.png) no-repeat;
			background-size: 100% 100%;
		}

		.white-content-block .product-Content p {
			font-size: 16px;
			color: #5f5f5f;
			width: 100%;
			margin-bottom: 0px;
			margin-top: 20px;
		}

		.white-content-block .product-Content p img {
			margin: 0;
			border-radius: 0px;
		}
	}
</style>
